<style scoped>
    .item-disabled {
        margin-bottom: 0;
    }

    .type-box {
        display: flex;
        flex-flow: row;
    }

    .item-title {
        text-align: center;
    }
</style>
<template>
    <div class="Business">
        <Form ref="formData" :model="formData" :rules="formRules" :label-width="120"
              :disabled="isFormDisabled">
            <Row>
                <Col :xs="24" :sm="12">
                    <FormItem label="变更类型" prop="changeType">
                        <RadioGroup v-model="formData.changeType" @on-change="changeType">
                            <Radio :disabled="!!pageParams.caseNo" label="PHONE">联系方式</Radio>
                            <Radio :disabled="!!pageParams.caseNo" label="ADDRESS">地址</Radio>
                            <Radio :disabled="!!pageParams.caseNo" label="ADDRESS_AND_PHONE">联系方式和地址</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col :xs="24" :sm="12">
                    <FormItem label="变更主体" prop="changeSubject">
                        <RadioGroup v-model="formData.changeSubject" @on-change="changeMain">
                            <Radio v-for="(item,index) in subjectData" :key="index"
                                   :disabled="item.disabled || !!pageParams.caseNo"
                                   :label="item.value">{{ item.title }}
                            </Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <!-- <Col :xs="24" :sm="12" :lg="8">
                    <FormItem label="短信验证码" prop="amount">
                        <Row>
                            <Col span="16">
                                <Input type="text" v-model="formData.amount" :disabled="readOnly" />
                            </Col>
                            <Col span="8" style="text-align: right">
                                <Button type="primary">发送验证码</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>-->
            </Row>
            <div class="business-change-item">
                <List>
                    <ListItem class="borrower">
                        <Row style="width:100%;">
                            <Col span="4">
                                <div class="item-title">
                                    <span>{{ getTitle('PersonRoleType', formData.changeSubject) }} {{
                                            formData.oldCustName
                                        }}</span>
                                </div>
                            </Col>
                            <Col span="20">
                                <Row v-show="formData.changeType !== 'ADDRESS'">
                                    <Col span="12">
                                        <FormItem label="原手机号" prop="oldPhone" class="item-disabled">
                                            <Input clearable v-model="formData.oldPhone" placeholder disabled/>
                                        </FormItem>

                                        <FormItem label="新手机号" prop="newPhone">
                                            <Input clearable v-model="formData.newPhone" :maxlength="11" placeholder/>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="原单位电话" prop="oldWorkPhone" class="item-disabled">
                                            <Input clearable v-model="formData.oldWorkPhone" placeholder disabled/>
                                        </FormItem>

                                        <FormItem label="新单位电话" prop="newWorkPhone">
                                            <Input clearable v-model="formData.newWorkPhone" :maxlength="11"
                                                   placeholder/>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="原家庭联系方式" prop="oldOtherContact" class="item-disabled">
                                            <Input clearable v-model="formData.oldHomeContact" placeholder disabled/>
                                        </FormItem>

                                        <FormItem label="新家庭联系方式" prop="newOtherContact">
                                            <Input clearable v-model="formData.newHomeContact" :maxlength="11"
                                                   placeholder/>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="原其他联系方式" prop="oldOtherContact" class="item-disabled">
                                            <Input clearable v-model="formData.oldOtherContact" placeholder disabled/>
                                        </FormItem>

                                        <FormItem label="新其他联系方式" prop="newOtherContact">
                                            <Input clearable v-model="formData.newOtherContact" :maxlength="11"
                                                   placeholder/>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row v-show="formData.changeType !== 'PHONE'">
                                    <Col span="24">
                                        <PlaceCascade
                                            label="原工作地址"
                                            value="oldWorkAddress"
                                            detailValue="oldWorkAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="true"
                                            :location="initLoadData"
                                            class="item-disabled"
                                        />
                                        <PlaceCascade
                                            label="新工作地址"
                                            value="newWorkAddress"
                                            detailValue="newWorkAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="false"
                                            :location="initLoadData"
                                        />
                                    </Col>
                                    <Col span="24">
                                        <PlaceCascade
                                            label="原家庭地址"
                                            value="oldLiveAddress"
                                            detailValue="oldLiveAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="true"
                                            :location="initLoadData"
                                            class="item-disabled"
                                        >>
                                        </PlaceCascade>
                                        <PlaceCascade
                                            label="新家庭地址"
                                            value="newLiveAddress"
                                            detailValue="newLiveAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="false"
                                            :location="initLoadData"
                                        ></PlaceCascade>
                                    </Col>
                                    <Col span="24">
                                        <PlaceCascade
                                            label="原户籍地址"
                                            value="oldHomeAddress"
                                            detailValue="oldHomeAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="true"
                                            :location="initLoadData"
                                            class="item-disabled"
                                        >>
                                        </PlaceCascade>
                                        <PlaceCascade
                                            label="新户籍地址"
                                            value="newHomeAddress"
                                            detailValue="newHomeAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="false"
                                            :location="initLoadData"
                                        ></PlaceCascade>
                                    </Col>
                                    <Col span="24">
                                        <PlaceCascade
                                            label="原邮寄地址"
                                            value="oldMailingAddress"
                                            detailValue="oldMailingAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="true"
                                            :location="initLoadData"
                                            class="item-disabled"
                                        >>
                                        </PlaceCascade>
                                        <PlaceCascade
                                            label="新邮寄地址"
                                            value="newMailingAddress"
                                            detailValue="newMailingAddressDetail"
                                            :form="formData"
                                            :isDetailAddress="true"
                                            :isDisabled="false"
                                            :location="initLoadData"
                                        ></PlaceCascade>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </ListItem>
                </List>
            </div>
        </Form>
    </div>
</template>
<script>
    import {findContractNewContact, findContractOldContact} from "_p/basic/api/contract/post-loan-info-change";
    import {isPhoneValiate} from "_p/basic/assets/contract/js/utils";

    import {findCustRole} from '_p/basic/api/contract/common/customer-info/customer-info'
    import {getLocation} from "_p/basic/api/contract/common/common";
    import {verifyErrorToView} from "_p/basic/assets/contract/js/utils";
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";
    import {businessSource, channelType} from "@/projects/basic/api/contract/channel-type/channel-type";

    import PlaceCascade from "_p/basic/pages/contract/common/PlaceCascade";

    export default {
        components: {PlaceCascade},
        props: {
            dataDict: {
                type: Object,
                required: true
            },
            isApprove: {
                type: Boolean,
                require: true
            },
            //是否 审批完成
            isApproved: {
                type: Boolean,
                required: true
            },
            isReadOnly: {
                type: Boolean,
                default: false
            },
            //对象参数包含：合同号码、角色类型
            Obj: {
                type: Object,
                required: true
            },
            pageParams: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                indeterminate: false,
                checkAllType: false,
                isSave: false,
                type: "",
                changeSubject: "",
                business: "",
                initLoadData: [],
                isSP: "",
                businessForm: [
                    {
                        name: "主借人",
                        type: "MAIN_PERSON"
                    },
                    {
                        name: "共借人",
                        type: "JOINT_PERSON"
                    },
                    {
                        name: "担保人",
                        type: "GUARANTEE_PERSON"
                    }
                ],
                showForm: {
                    type: "1",
                    phone: true,
                    address: false
                },
                formDataBase: {},
                formData: {
                    changeType: "PHONE",
                    custName: "",
                    oldCustName: "",
                    oldHomeAddress: [],
                    oldWorkAddress: [],
                    oldLiveAddress: [],
                    oldMailingAddress: [],
                    oldPhone: "",
                    newPhone: "",
                    oldWorkPhone: "",
                    newWorkPhone: "",
                    oldHomeContact: "",
                    newHomeContact: "",
                    oldOtherContact: "",
                    newOtherContact: ""
                },
                formRules: {
                    changeType: [{required: true, message: "请选择一项", trigger: "change"}],
                    type: [
                        {required: true, message: "请选择一项", trigger: "change"}
                    ],
                    changeSubject: [
                        {required: true, message: "请选择一项", trigger: "change"}
                    ],
                    newPhone: [
                        {
                            required: false,
                            validator: isPhoneValiate,
                            trigger: "blur"
                        },
                        {
                            type: 'number', message: '请输入数字格式', trigger: 'change    ', transform(value) {
                                return Number(value);
                            }
                        }
                    ],
                    newWorkPhone: [
                        {
                            required: false,
                            message: '请输入数字格式',
                            trigger: "blur"
                        }
                    ]
                },
                customerInfo: [],
                subjectData: [],
            };
        },
        computed: {
            isFormDisabled() {
                return this.isApprove || this.isApproved || this.isReadOnly
            },
        },
        watch: {
            dataDict: function (val, oldval) {
                this.subject()
            },
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                let params;
                params = typeof this.pageParams === "object" ? this.pageParams : {};

                if (!params.changeSubject) params.changeSubject = "MAIN_PERSON";

                this.formData = Object.assign({}, this.formData, params);
                this.changeMain(params.changeSubject);
                this.getInitData();
                // 客户信息
                this.getCustomerInfo()
                this.isSP = channelType(this.$route.meta.params);
            },
            getInitData() {
                let param = {
                    level: "1",
                    upperCode: "1"
                };
                getLocation(param).then(res => {
                    if (res.code == "0000") {
                        res.data.forEach(item => {
                            // 表明是否是父节点
                            if (item.isParent) {
                                item.loading = false;
                                item.children = [];
                            }
                        });
                    }
                    this.initLoadData.push(...res.data);
                });
            },
            loadData(item, callback) {
                item.loading = true;
                getLocation({upperCode: item.value}).then(res => {
                    if (res.code === "0000") {
                        res.data.forEach(function (item) {
                            if (item.isParent) {
                                item.loading = false;
                                item.children = [];
                            }
                        });
                        item.children = res.data;
                        item.loading = false;
                        callback();
                    }
                });
            },
            changeType(type) {
                let phone,
                    address,
                    formData = {
                        changeType: type
                    };

                switch (type) {
                    case "PHONE":
                        phone = true;
                        address = false;
                        formData.newHomeAddress = [];
                        formData.newHomeAddressDetail = "";
                        formData.newWorkAddress = [];
                        formData.newWorkAddressDetail = "";
                        formData.newLiveAddress = [];
                        formData.newLiveAddressDetail = "";
                        formData.newMailingAddress = [];
                        formData.newMailingAddressDetail = "";
                        break;
                    case "ADDRESS":
                        phone = false;
                        address = true;
                        formData.newPhone = "";
                        formData.newHomeContact = "";
                        formData.newWorkPhone = "";
                        formData.newOtherContact = "";
                        break;
                    case "ADDRESS_AND_PHONE":
                        phone = true;
                        address = true;
                        break;
                }
                this.formData = Object.assign({}, this.formData, formData);
            },
            changeMain(custRole) {
                console.log(custRole);
                let contractNo = this.Obj.contractNo;

                this.getBasicInfo({contractNo, custRole});

                this.showForm.type = custRole;
            },
            getBasicInfo(data) {
                if (!data) return;
                if (!this.pageParams.readOnly && !this.isApproved) {
                    findContractOldContact(data, this.isSP).then(res => {
                        if (res.code === "0000") {
                            this.formData = Object.assign({}, this.formData, res.data);
                            this.formData.oldCustName = res.data.custName;
                        }
                    });
                }
                if (this.pageParams.caseNo) {
                    data.caseNo = this.pageParams.caseNo
                    findContractNewContact(data, this.isSP).then(res => {
                        if (res.code === "0000" && res.data) {
                            let d = JSON.parse(res.data)
                            this.formData = Object.assign({}, this.formData, d);
                            console.log("新数据 ", d);
                            this.$emit('baseInfo',d)
                        }
                    });
                }
            },
            /*
             * formData 数据验证 验证通过后 将数据传回父级处理  (保存/提交/审核 通用)
             * @param {String} funcName 回传给父级的方法 (注意父级需要传方法)
             * @param {Object} [data]   父级带来的数据
             */
            formValidate(funcName, data) {
                if (!funcName) return;

                this.$refs.formData.validate(valid => {
                    if (valid) {
                        if (this.phoneAndAddressValidate()) {
                            let d = Object.assign({}, data, this.formData);

                            this.$emit(funcName, d);
                        } else {
                            this.$Message.error("请填联系方式或者地址信息!");
                            this.$emit("closeSpin");
                        }
                    } else {
                        this.$Message.error("验证不通过!");
                        this.$emit("closeSpin");
                        verifyErrorToView(this.$refs.formData.fields);
                    }
                });
            },
            phoneAndAddressValidate() {
                let bool = false;

                if (this.formData.changeType === "PHONE" || this.formData.changeType === "ADDRESS_AND_PHONE") {
                    if (this.formData.newPhone || this.formData.newWorkPhone || this.formData.newOtherContact)
                        bool = true;
                }
                if (this.formData.changeType === "ADDRESS" || this.formData.changeType === "ADDRESS_AND_PHONE") {
                    if (this.formData.newMailingAddress || this.formData.newHomeAddress || this.formData.newLiveAddress || this.formData.newWorkAddress)
                        bool = true;
                }
                return bool;
            },

            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            },
            // 查询客户角色信息
            getCustomerInfo() {
                if (!this.Obj && !this.Obj.contractNo) return;

                findCustRole(this.Obj.contractNo).then(res => {
                    if (res.code === "0000" && res.data) {
                        this.customerInfo = res.data.custInfo;
                        this.subject()
                    }
                });
            },
            // 变更主体 数据
            subject() {
                if (!this.dataDict && !this.customerInfo) return;
                let dict = this.dataDict.PersonRoleTypeDict,
                    info = this.customerInfo,
                    subjectData = [];

                if (Array.isArray(dict) && dict.length > 0 && Array.isArray(info)) {
                    dict.forEach((item, index) => {
                        let disabled = this.isDisabledSubject(item.value, info)
                        subjectData.push(Object.assign({}, item, {disabled}))
                    });
                    this.subjectData = subjectData;
                }
            },
            // 判断是否有 主借人共借人担保人
            isDisabledSubject(value, customerInfo) {
                let bool = true;
                if (Array.isArray(customerInfo)) {
                    for (let i = 0; i < customerInfo.length; i++) {
                        if (customerInfo[i].roleType === value) {
                            bool = false;
                            break
                        }
                    }
                }
                return bool;
            },
        }
    };
</script>
